import React, { useState, useEffect } from 'react';
import { Table, Button, notification } from 'antd';
import {
  PlusCircleFilled,
  EditOutlined,
  DeleteFilled,
  AppstoreAddOutlined,
} from '@ant-design/icons';
import CreateModal from './createModal';
import API from '@/api';
import { showDeleteConfirm } from '@/utils/util';
const menuManagement = () => {
  const [visible, setVisible] = useState(false);
  const [menuItem, setMenuItem] = useState(null);
  const [status, setStatus] = useState(0);
  const [list, setList] = useState([]);
  const reqestList = {
    0: API.insertMenu,
    1: API.insertMenu,
    2: API.updateMenu,
  };
  const initList = () => {
    API.getMenuPermissionList().then((res) => {
      if (res?.t) {
        setList(res.t);
      }
    });
  };
  useEffect(() => {
    initList();
  }, []);
  const menuTypes = { 1: '菜单', 2: '功能', 3: '按钮' };
  const columns = [
    {
      title: '菜单名称',
      dataIndex: 'name',
      align: 'center',
      width: 200,
    },
    {
      title: '类型',
      dataIndex: 'type',
      align: 'center',
      render: (t) => menuTypes[t],
    },
    {
      title: 'url',
      dataIndex: 'url',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (text, r) => (
        <div>
          <Button
            type="link"
            icon={<AppstoreAddOutlined />}
            className="table-icon"
            onClick={() => createSubMenu(r)}
          ></Button>
          <Button
            type="link"
            icon={<EditOutlined />}
            className="table-icon"
            onClick={() => editFn(r)}
          ></Button>
          <Button
            type="link"
            icon={<DeleteFilled />}
            className="table-icon"
            onClick={() => showDeleteConfirm(() => delFn(r.id))}
          ></Button>
        </div>
      ),
    },
  ];
  const createSubMenu = (item) => {
    setVisible(true);
    setStatus(1);
    setMenuItem(item);
  };
  const createLink = () => {
    setVisible(true);
    setStatus(0);
  };
  const cancelFn = () => {
    setVisible(false);
    setStatus(0);
    setMenuItem(null);
  };
  const editFn = (r) => {
    setVisible(true);
    setStatus(2);
    setMenuItem(r);
  };
  const delFn = (id) => {
    API.delMenu({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList();
      }
    });
  };
  const onCreate = (values) => {
    switch (status) {
      case 0:
        values.pid = 0;
        break;
      case 1:
        values.pid = menuItem.id;
        break;
      case 2:
        values.id = menuItem.id;
        values.pid = menuItem.pid;
        break;
    }
    reqestList[status]({ ...values }).then((res) => {
      if (res) {
        notification.success({
          message: (status === 2 ? '编辑' : '新增') + '成功',
        });
        setVisible(false);
        initList();
      }
    });
  };
  return (
    <>
      <div className="bgf main-x">
        <div className="tools-x">
          <Button
            type="link"
            icon={<PlusCircleFilled />}
            className="btn-icon"
            onClick={createLink}
          >
            新增一级菜单
          </Button>
        </div>
        <div className="pd-x">
          <Table
            className="custom-table"
            columns={columns}
            rowKey="id"
            dataSource={list}
            pagination={false}
          ></Table>
        </div>
      </div>
      <CreateModal
        visible={visible}
        onCreate={onCreate}
        onCancel={cancelFn}
        menuItem={menuItem}
        status={status}
      ></CreateModal>
    </>
  );
};

export default menuManagement;
